<template>
  <div class="p-6 space-y-6">
    <!-- 页面标题 -->
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">菜单管理</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">管理系统菜单结构和导航</p>
      </div>
      <button class="btn-primary flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        新增菜单
      </button>
    </div>

    <!-- 菜单统计 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
      <div class="card text-center">
        <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">{{ totalMenus }}</div>
        <div class="text-gray-600 dark:text-gray-400">总菜单数</div>
      </div>
      <div class="card text-center">
        <div class="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">{{ activeMenus }}</div>
        <div class="text-gray-600 dark:text-gray-400">启用菜单</div>
      </div>
      <div class="card text-center">
        <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">{{ menuLevels }}</div>
        <div class="text-gray-600 dark:text-gray-400">菜单层级</div>
      </div>
      <div class="card text-center">
        <div class="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-2">{{ externalLinks }}</div>
        <div class="text-gray-600 dark:text-gray-400">外部链接</div>
      </div>
    </div>

    <!-- 菜单管理区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 菜单树 -->
      <div class="lg:col-span-2 card">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">菜单树</h3>
          <div class="flex items-center gap-2">
            <button class="btn-secondary text-sm">展开全部</button>
            <button class="btn-secondary text-sm">收起全部</button>
            <button class="btn-secondary text-sm">重置排序</button>
          </div>
        </div>

        <div class="space-y-2">
          <div v-for="menu in menuTree" :key="menu.id" class="border border-gray-200 dark:border-gray-700 rounded-lg">
            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800/50">
              <div class="flex items-center gap-3">
                <svg
                  class="w-5 h-5 text-gray-600 dark:text-gray-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
                <span class="font-medium text-gray-900 dark:text-gray-100">{{ menu.name }}</span>
                <span :class="getMenuTypeClass(menu.type)">{{ menu.type }}</span>
                <span :class="getStatusBadgeClass(menu.status)">
                  {{ menu.status === 'active' ? '启用' : '禁用' }}
                </span>
              </div>
              <div class="flex items-center gap-2">
                <span class="text-sm text-gray-500 dark:text-gray-400">{{ menu.path }}</span>
                <button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                </button>
                <button class="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
              </div>
            </div>

            <div v-if="menu.children && menu.children.length > 0" class="p-4 space-y-2">
              <div
                v-for="child in menu.children"
                :key="child.id"
                class="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 ml-6">
                <div class="flex items-center gap-3">
                  <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span class="text-gray-900 dark:text-gray-100">{{ child.name }}</span>
                  <span :class="getMenuTypeClass(child.type)">{{ child.type }}</span>
                  <span :class="getStatusBadgeClass(child.status)">
                    {{ child.status === 'active' ? '启用' : '禁用' }}
                  </span>
                </div>
                <div class="flex items-center gap-2">
                  <span class="text-sm text-gray-500 dark:text-gray-400">{{ child.path }}</span>
                  <button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                  </button>
                  <button class="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 菜单详情 -->
      <div class="card">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">菜单详情</h3>

        <div v-if="selectedMenu" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">菜单名称</label>
            <input type="text" :value="selectedMenu.name" class="input" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">菜单路径</label>
            <input type="text" :value="selectedMenu.path" class="input" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">菜单类型</label>
            <select class="input">
              <option value="menu">菜单</option>
              <option value="button">按钮</option>
              <option value="link">链接</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">图标</label>
            <input type="text" :value="selectedMenu.icon" class="input" placeholder="图标类名或SVG" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">排序</label>
            <input type="number" :value="selectedMenu.sort" class="input" />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">状态</label>
            <select class="input">
              <option value="active">启用</option>
              <option value="inactive">禁用</option>
            </select>
          </div>

          <div class="flex items-center gap-3">
            <button class="btn-primary flex-1">保存</button>
            <button class="btn-secondary flex-1">取消</button>
          </div>
        </div>

        <div v-else class="text-center text-gray-500 dark:text-gray-400 py-8">
          <svg
            class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <p>选择一个菜单查看详情</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="system-menu">
import { ref, computed } from 'vue'

defineOptions({ name: 'menu' })

const menuTree = ref([
  {
    id: 1,
    name: '系统管理',
    path: '/system',
    type: 'menu',
    status: 'active',
    icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
    sort: 1,
    children: [
      {
        id: 2,
        name: '用户管理',
        path: '/system/user',
        type: 'menu',
        status: 'active',
        icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z',
        sort: 1,
      },
      { id: 3, name: '角色管理', path: '/system/role', type: 'menu', status: 'active', icon: 'M12 6v6l4 2', sort: 2 },
      {
        id: 4,
        name: '权限管理',
        path: '/system/permission',
        type: 'menu',
        status: 'active',
        icon: 'M12 4v16m8-8H4',
        sort: 3,
      },
      {
        id: 5,
        name: '菜单管理',
        path: '/system/menu',
        type: 'menu',
        status: 'active',
        icon: 'M4 6h16M4 12h16M4 18h16',
        sort: 4,
      },
      {
        id: 6,
        name: '部门管理',
        path: '/system/dept',
        type: 'menu',
        status: 'active',
        icon: 'M16 7a4 4 0 01-8 0',
        sort: 5,
      },
    ],
  },
  {
    id: 7,
    name: '元数据管理',
    path: '/meta',
    type: 'menu',
    status: 'active',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
    sort: 2,
    children: [
      {
        id: 8,
        name: '元数据模型',
        path: '/meta/model',
        type: 'menu',
        status: 'active',
        icon: 'M12 4v16m8-8H4',
        sort: 1,
      },
      {
        id: 9,
        name: '元数据字段',
        path: '/meta/field',
        type: 'menu',
        status: 'active',
        icon: 'M4 6h16M4 12h16M4 18h16',
        sort: 2,
      },
    ],
  },
  {
    id: 10,
    name: '低代码平台',
    path: '/lowcode',
    type: 'menu',
    status: 'active',
    icon: 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z',
    sort: 3,
    children: [
      {
        id: 11,
        name: '表单设计器',
        path: '/lowcode/form-designer',
        type: 'menu',
        status: 'active',
        icon: 'M12 4v16m8-8H4',
        sort: 1,
      },
      {
        id: 12,
        name: '表单列表',
        path: '/lowcode/forms',
        type: 'menu',
        status: 'active',
        icon: 'M4 6h16M4 12h16M4 18h16',
        sort: 2,
      },
      {
        id: 13,
        name: '表单数据',
        path: '/lowcode/form-data',
        type: 'menu',
        status: 'active',
        icon: 'M12 4v16m8-8H4',
        sort: 3,
      },
    ],
  },
  {
    id: 14,
    name: '插件系统',
    path: '/plugin',
    type: 'menu',
    status: 'active',
    icon: 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z',
    sort: 4,
    children: [
      {
        id: 15,
        name: '插件市场',
        path: '/plugin/market',
        type: 'menu',
        status: 'active',
        icon: 'M4 6h16M4 12h16M4 18h16',
        sort: 1,
      },
      {
        id: 16,
        name: '已安装插件',
        path: '/plugin/installed',
        type: 'menu',
        status: 'active',
        icon: 'M12 4v16m8-8H4',
        sort: 2,
      },
    ],
  },
])

const selectedMenu = ref<any>(null)

const totalMenus = computed(() => {
  let count = 0
  menuTree.value.forEach((menu) => {
    count++
    if (menu.children) {
      count += menu.children.length
    }
  })
  return count
})

const activeMenus = computed(() => {
  let count = 0
  menuTree.value.forEach((menu) => {
    if (menu.status === 'active') count++
    if (menu.children) {
      menu.children.forEach((child) => {
        if (child.status === 'active') count++
      })
    }
  })
  return count
})

const menuLevels = computed(() => 2) // 假设最多2级菜单

const externalLinks = computed(() => 0) // 假设没有外部链接

function getMenuTypeClass(type: string) {
  const classes = {
    menu: 'px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400 text-xs rounded-full',
    button: 'px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded-full',
    link: 'px-2 py-1 bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400 text-xs rounded-full',
  }
  return classes[type as keyof typeof classes] || classes['menu']
}

function getStatusBadgeClass(status: string) {
  return status === 'active'
    ? 'px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded-full'
    : 'px-2 py-1 bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400 text-xs rounded-full'
}
</script>
